<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- v-once 指令使此处的内容只渲染一次，后续数据变化不会更新 -->
        <p v-once>原始值：{{msg}}</p>
        <!-- 此处的内容会随着 msg 的变化而实时更新 -->
        <p>后面的：{{msg}}</p>
        <!-- v-model 指令实现双向数据绑定，将输入框的值与 msg 数据关联 -->
        <input type="text" name="" id="" value="" v-model="msg"/>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app", // 指定 Vue 实例管理的 DOM 元素为 id 为 "app" 的 div
            data: {
                msg: "今天天气很好！" // 定义数据 msg 并初始化为 "今天天气很好！"
            }
        })
    </script>
</body>
</html>